<template>
  <el-table-column
    class="table-column-action"
    :label="$t('field.action')"
    :width="width"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template slot-scope="scope">
      <div class="table-column-action-btns">
        <slot v-bind:scope="scope">
          <el-button
            type="primary"
            size="mini"
            round
            @click="$emit('edit', scope.row)"
            v-permission="editCode"
            >{{ $t('action.edit') }}</el-button
          >
          <el-button
            type="danger"
            size="mini"
            round
            @click="$emit('remove', scope.row)"
            v-permission="removeCode"
            >{{ $t('action.remove') }}</el-button
          >
        </slot>
      </div>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'TableColumnAction',
  props: {
    width: {
      type: String,
      default: '150'
    },
    editCode: {
      type: String,
      default: ''
    },
    removeCode: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.table-column-action-btns {
  text-align: center;
  // .el-link {
  //   margin-left: 10px;
  //   &:first-child {
  //     margin-left: 0;
  //   }
  // }
}
</style>
